<template>
	<view class="category">
		<search></search>
		<view class="content">
			<view class="left">
				<view class="left-i" @click="changeIndex(index)" :class="{active:currentIndex === index}" v-for="(item,index) in categoryList" :key="index">
					{{item.cat_name}}
				</view>
			</view>
			<scroll-view class="right" scroll-y :scroll-top="scrollTop">
				<view class="img">
					<image class="pic" src="../../static/titleImage.png" mode=""></image>
				</view>
				<view class="oneitem" v-for="(item1,index1) in categoryList[currentIndex].children" :key="index1">
					<view class="title">
						/<text>{{item1.cat_name}}</text>/
					</view>
					<view class="display">
						<view class="display-i" @click="toSearchList(item2.cat_name)" v-for="(item2,index2) in item1.children" :key="index2">
							<view class="img">
								<image :src="item2.cat_icon" mode=""></image>	
							</view>
							<text class="txt">{{item2.cat_name}}</text>
						</view>
						<view class="noUse">
						</view>
						<view class="noUse">
						</view>
						<view class="noUse">
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import search from '../../components/search.vue'
	export default {
		components:{
			search
		},
		data(){
			return{
				categoryList:[],
				currentIndex: 0,
				scrollTop:100
			}
		},
		onLoad(){
			this.getCategoryData()
		},
		methods:{
			async getCategoryData(){
				const res = await this.$http({url:'/categories',method:'get'})
				console.log(res)
				this.categoryList = res
			},
			changeIndex(idx){
				this.currentIndex = idx
				this.scrollTop = 100
				this.$nextTick(()=>{
					this.scrollTop = 0
				})
			},
			toSearchList(key){
				uni.navigateTo({
					url:'/pages/searchList/searchList?key=' + key
				})
			}
		}
	}
</script>

<style lang="less">
	.category{
		.content{
			position: fixed;
			top: 100rpx;
			left: 0;
			bottom: 0;
			right: 0;
			display: flex;
			.left{
				width: 200rpx;
				height: 100%;
				overflow: auto;
				.left-i{
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					color: #333;
					background-color: #f4f4f4;
					border-bottom: 1rpx solid #eeeeee;
					&.active{
						color: #eb4450;
						background-color: #ffffff;
						font-weight: 600;
						position: relative;
						&::before{
							content: '';
							width: 8rpx;
							height: 60rpx;
							background-color: #eb4450;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}
			.right{
				flex: 1;
				height: 100%;
				overflow: auto;
				padding: 0 16rpx;
				padding-top: 20rpx;
				.img{
					width: 100%;
					height: 180rpx;
					.pic{
						width: 100%;
						height: 100%;
					}
				}
				.title{
					width: 100%;
					height: 110rpx;
					line-height: 110rpx;
					text-align: center;
					background-color: #ffffff;
					color: #e0e0e0;
					text{
						color: #333333;
						margin: 0 20rpx;
					}
				}
				.display{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.display-i{
						width: 33.33%;
						height: 176rpx;
						text-align: center;
						margin-bottom: 20rpx;
						.img{
							width: 120rpx;
							height: 120rpx;
							margin: 0 auto;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
					.noUse{
						width: 33.33%;
					}
				}
			}
		}
	}
</style>
